<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-3.3.-1.js"></script>
    <script type="text/javascript">

        /*
        *    jquery对象.show():定位标签在浏览器中显示出来
        *    jquery对象.hide():定位标签在浏览中隐藏起来
        *
        *      <table>
        *          <thead>
        *           <tbody>
                  <tfoot>
        *      </table>
        *
        *       $(":radio[name='oper']").click(fun1);
        *       相当于
        *
        *       obj.click = fun1()
        *       obj.fun1();
        *
        * */

        $(function(){
              $(":radio[name='oper']").click(fun1);



        });

        function fun1(){
            //1.获得用户选中的radio标签的value  this表示用户单击的radio
               var flag = $(this).val(); //1 or 2
            //2.决定table标签哪些数据行会在浏览器显示/隐藏
            if(flag == '1'){//学员添加
                $("table tr:lt(3)").show();
                $("table tr:gt(2)").hide();
            }else{//课程添加
                $("table tr:lt(3)").hide();
                $("table tr:gt(2)").show();
                $("table tr:first").show();
            }
        }

    </script>
</head>
<body>

            <center>

                 <table border="2">

                     <!--选择操作页面-->

                     <tr>
                         <td><input type="radio" name="oper" value="1"/>学员添加</td>
                         <td><input type="radio" name="oper" value="2"/>课程添加</td>
                     </tr>

                     <!--学员添加页面-->
                     <tr>
                         <td>学员姓名</td>
                         <td><input type="text"/></td>
                     </tr>

                     <tr>
                         <td>学员性别</td>
                         <td><input type="radio"/>男<input type="radio"/>女</td>
                     </tr>


                     <!--课程添加页面-->
                     <tr style="display: none">
                         <td>课程名称</td>
                         <td><input type="text"/></td>
                     </tr>

                     <tr style="display: none">
                         <td>课程类别</td>
                         <td>
                             <select  >
                                 <option>计算机类</option>
                                 <option>舞蹈类</option>
                             </select>

                         </td>
                     </tr>

                 </table>



              </center>

</body>
</html>